<script setup>
import menuBox from './components/menu/menuBox.vue';

</script>

<template>
  <div>
    <header style="background-color: burlywood;">
      <router-link to="/">Go to Home</router-link>
      <router-link to="/about">Go to About</router-link>
      <router-link to="/draggable">Go to About</router-link>
    </header>

    <div style="display: flex;">
      <menu style="width: 15%;background-color: pink;">
        <menu-box></menu-box>
      </menu>

      <div class="content" style="width: 80%;">
        <router-view></router-view>
      </div>
    </div>
    
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.content {
  padding: 40px;
  height: 85vh;
}
</style>
